<template>
  <t-space>
    <t-button theme="primary" @click="onClick">弹出驳回选项框</t-button>
    <t-dialog
        v-model:visible="visible"
        header="对话框标题"
        width="40%"
        :confirm-on-enter="true"
        :on-cancel="onCancel"
        :on-esc-keydown="onEscKeydown"
        :on-close-btn-click="onCloseBtnClick"
        :on-overlay-click="onOverlayClick"
        :on-close="close"
        :on-confirm="onConfirmAnother"
    >
      <t-space direction="vertical" style="width: 100%">

        <t-form ref="form" :rules="FORM_RULES" :data="formData" :colon="true" @reset="onReset" @submit="onSubmit">
          <t-form-item label="原因" name="name">
            <t-input v-model="formData.reason" placeholder="请输入驳回原因" @enter="onEnter"></t-input>
          </t-form-item>
          <t-form-item>
            <t-space size="small">
              <t-button theme="primary" type="submit">提交</t-button>
              <t-button theme="default" variant="base" type="reset">重置</t-button>
            </t-space>
          </t-form-item>
        </t-form>

      </t-space>
    </t-dialog>
  </t-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {DialogProps, ButtonProps, FormProps, MessagePlugin} from 'tdesign-vue-next';
const visible = ref(false);
// 弹出表单信息
const form_item = ref("")
const formData = ref({
  reason: ""
})
const onReset: FormProps['onReset'] = () => {
  MessagePlugin.success('重置成功');
};
const onSubmit: FormProps['onSubmit'] = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};
const FORM_RULES: FormProps['rules'] = {
  reason: [
    {
      required: true,
      message: '原因必填',
    },
  ],
};


// 操作弹出框
const onClick: ButtonProps['onClick'] = (context) => {
  console.log('点击了确认按钮，弹出弹窗', context);
  visible.value = true;
};
const onConfirmAnother: DialogProps['onConfirm'] = (context) => {
  console.log('点击了确认按钮', context);
  visible.value = false;
};
const close: DialogProps['onClose'] = (context) => {
  console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
};
const onCancel: DialogProps['onCancel'] = (context) => {
  console.log('点击了取消按钮', context);
};
const onEscKeydown: DialogProps['onEscKeydown'] = (context) => {
  console.log('按下了ESC', context);
};
const onCloseBtnClick: DialogProps['onCloseBtnClick'] = (context) => {
  console.log('点击了关闭按钮', context);
};
const onOverlayClick: DialogProps['onOverlayClick'] = (context) => {
  console.log('点击了蒙层', context);
};


</script>
